<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻译</title>
    <style>
        /* Google Roboto 字体 */
        @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap');

        /* 主要颜色 */
        :root {
            --primary-blue: #4285f4;
            --light-grey: #ccc;
        }

        /* 全局样式 */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Roboto', sans-serif;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        /* 输入框和下拉选择框 */
        .input-group {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
        }

        .input-group > * {
            flex: 1;
        }

        input[type="text"],
        select {
            height: 36px;
            font-size: 16px;
            line-height: 1.5;
            color: #555;
            border: none;
            background-color: #f2f2f2;
            border-radius: 5px;
            padding: 0 12px;
        }

        select {
            width: 130px;
        }

        /* 翻译按钮 */
        button {
            height: 36px;
            font-size: 16px;
            font-weight: 500;
            text-transform: uppercase;
            color: white;
            background-color: var(--primary-blue);
            border: none;
            border-radius: 5px;
            padding: 0 16px;
            cursor: pointer;
            transition: all 0.15s ease-in-out;
        }

        button:hover {
            background-color: darken(var(--primary-blue), 10%);
        }

        /* 输出文本 */
        .output-group {
            margin-top: 24px;
            font-size: 18px;
            line-height: 1.5;
            text-align: justify;
        }

    </style>
</head>
<body>
<div id="app">
    <div class="input-group">
        <input v-model="sourceText" placeholder="请输入要翻译的文本">
        <select v-model="sourceLang">
            <option value="en">英语</option>
            <option value="zh">中文</option>
            <!-- 其他语言选项 -->
        </select>
        <select v-model="targetLang">
            <option value="zh">中文</option>
            <option value="en">英语</option>
            <!-- 其他语言选项 -->
        </select>
        <button @click="translate">翻译</button>
    </div>
    <div class="output-group">
        <div v-if="isLoading">正在翻译中...</div>
        <div v-else>{{ translatedText }}</div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            sourceText: '',
            sourceLang: 'en',
            targetLang: 'zh',
            isLoading: false,
            translatedText: ''
        },
        methods: {
            translate() {
                this.isLoading = true;
                const url = `http://43.139.27.164:2222/translation/${this.source}-${this.targetLang}`;
                const xhr = new XMLHttpRequest();
                xhr.open('POST', url);
                xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
                xhr.onload = () => {
                    if (xhr.status === 200) {
                        const response = JSON.parse(xhr.responseText);
                        this.translatedText = response.data;
                    } else {
                        console.log(xhr.statusText);
                    }
                    this.isLoading = false;
                };
                const data = JSON.stringify({
                    q: this.sourceText,
                    source: this.sourceLang,
                    target: this.targetLang
                });
                xhr.send(data);
            }
        }
    });
</script>
</body>
</html>
